<template>

	<div class="list">

		<ul>

			<li v-for="post in res" :key="post.id">
				<h3 style="text-align: center;line-height: 30px;">
					<router-link to="/page">{{post.title}}</router-link>
				</h3>
				<p style="color: #808080;font-size: 14px;">{{post.p1}}</p>
				<p style="color: #808080;font-size: 14px;">{{post.p2}}</p>
				<p style="font-size: 14px;color: #808080;">
					作者:{{post.author}}
					发表于：{{post.time}}
					<span class="float-right">

						<router-link to="" style="color: #808080;">
							<span>查看原文</span> <i class="el-icon-d-arrow-right"></i>

						</router-link>
					</span>
				</p>

				<p style="border: 0.5px solid gainsboro;position: relative;left: -2px;"></p>



			</li>

		</ul>

	</div>

</template>

<script>
	//模拟请求到的数据
	let resData = [{
			"id": "1",
			"title": "这是第一篇文章",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "文章描述",
			"pic": ""
		},
		{
			"p1": "欢迎使用PHP内容管理系统",
			"p2": "这是一篇系统自动生成的文章，您可以自动删除",
			"author": "博学谷",
			"time": "05-31 14:50:07",
		},



	]



	export default {
		data() {
			return {
				res: resData
			}
		}
	}
</script>

<style scoped>
	.list {
		background: white;
	}

	.float-right {
		float: right;
	}

	a {
		color: #000;
		text-decoration: none;

	}

	li {
		list-style: none;

	}

	.pic {
		height: 200px;
		width: 300px;
	}

	.fenye {
		height: 60px;
		margin: 0 auto;
		text-align: center;
		line-height: 60px;
	}
</style>
